<template>
	<view class="collageGoodsDetail" v-if="product">
		<view class="navigation">
			<view class="back-box" v-if="is_share=='false'" @click="back()"> 
				<image src="/static/images/collage/white-back.png" class="collage-back"   mode="widthFix"></image>
			</view>
			<view class="back-box1" @click="backHome()" v-if="is_share=='true'">
				<image src="/static/images/home.png" class="collage-back"   v-if="is_share=='true'" mode="" mode="widthFix"></image>
			</view>
		</view>
		<view class="goods-banner" >
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" circular="true">
				<swiper-item class="item" v-for="(item,index) in product.slides" :key="index" >
					<image :src="item.slide_url" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="goods-describe-box">
			<view class="content">
				<view class="priceAndShare">
					<view class="priceAndShareLeft">
						<view class="normal-price">
							<view>成团价</view>
							<view>
								<text>￥</text>
								<text>{{ product.price_lowest }}</text>
							</view>
						</view>
						<view class="price-market-gray">¥{{ product.price_market }}</view>
						<view class="product_sold_count">已售{{ product.sold_count }}件</view>
					</view>
					<view class="share-btn" @click="shareProduct">
						<image src="/static/images/sharebtn.png" mode=""></image>
						<view>分享</view>
					</view>
				</view>
				<view class="goods-red-packet" v-if="bonus_record">
					<image src="/static/images/redpacket.png" class="redpacket" mode=""></image>
					<view>
						<text>开团红包</text>
						<text>每天领{{ bonus_record.bonus_money }}元</text>
					</view>
				</view>
				<!-- <view class="buy_vip_tips">开通VIP开团红包翻倍领</view> -->
				<view class="title">{{ product.title }}</view>
				<view class="tips">
					<view >此商品不支持退换货，如有介意，请勿参团</view>
					</image>
				</view>
			</view>
		</view>
		<view class="collages-strategy" @click="openStrategy()">
			<image src="/static/images/collage/collages-strategy-all.png" mode=""></image>
		</view>
		<view class="collages-ing-list">
			<view class="collages-ing-list-title" @click="goCollageList()">
				<view>{{ groupsNum }}个团正在进行中，可直接参与</view>
				<view>
					<view>查看全部</view>
					<image src="/static/images/collage/rightMore.png" mode=""></image>
				</view>
			</view>
			<view class="can-join-collage-list">
				<view class="can-join-collage-list-item" v-for="(item,index) in goodsGroupsList" :key="index" @click="goCollageDetail(item.id)">
					<view class="left">
						<view class="userimg-box">
							<image :src="item.user?item.user.avatar_url:item.machine_user.avatar_url"  class="userimg" mode=""></image>
							<image src="/static/images/collage/recommender.png" v-if="item.user&&item.user.id == user.parent_id" class="recommender" mode=""></image>
						</view>
						<view class="user-name">{{ item.user?item.user.name:item.machine_user.name }}</view>
					</view>
					<view class="right">
						<view>
							<view>
								还差<text style="margin:0 5rpx;">{{ item.group_amount - item.attend_users.length }}人</text>成团
							</view>
							<!-- <view v-if="item.end_times">
								剩余<uni-countdown :show-day="false" :hour="item.end_times.h" :minute="item.end_times.m" :second="item.end_times.s" color="#999999" splitorColor="#999999"></uni-countdown>
							</view> -->
						</view>
						<view  @click.stop="attendGroups(item.id)" v-if="!item.my_attend">去参团</view>
						<view  @click="goCollageDetail(item.id)" class="attended" v-if="item.my_attend">已参团</view>
					</view>
				</view>
			</view>
		</view>
		<product-images-com :images="product.images" :needSlogan="needSlogan"></product-images-com>
		<view style="width: 100%;height: 200rpx;"></view>
		<view class="footer">
			<view class="customer-service-box" >
				<image src="/static/images/collage/customer-service.png" mode=""></image>
				<view>客服</view>
			</view>
			<view class="pick-up-goods" @click="openBuyPanel()" :class="[from=='displaces'?'single-btn':'']" v-if="from=='displaces'">提货</view>
			<!-- <view class="want-open-group-box" @click="startGroups()" v-if="from!='displaces'" :class="[from!='displaces'?'single-btn':'']">
				<view class="want-open-group">我要开团</view>
				<view class="want-open-group-tips" v-if="needOpenGroups">
					<image src="/static/images/collae-btn-tips.png" mode=""></image>
				</view>
			</view> -->
			<view class="want-open-group-box" @click="goCollageList()" v-if="from!='displaces'" :class="[from!='displaces'?'single-btn':'']">
				<view class="want-open-group">我要参团</view>
				<view class="want-open-group-tips" v-if="needOpenGroups">
					<image src="/static/images/collae-btn-tips.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="collage-strategy-pop" @touchmove.stop.prevent="moveHandle" v-if="strategyPopShow">
			<view class="collage-strategy-pop-content">
				<image src="/static/images/collage/collages-strateg-pop-title.png" class="collages-strateg-pop-title" mode=""></image>
				<image src="/static/images/collage/close-pop.png" class="close-pop" mode="" @click="closeStrategy()"></image>
				<view class="strateg-content-item-box">
					<view class="strateg-content-item-text">1.参团者购买商品后可获得1张15天不限次数开团卡；</view>
					<view class="strateg-content-item-text">2.开团这邀请两位伙伴参团成功后可获得7天连续领取的开图红包，同时解锁一定比例的待解锁余额；</view>
					<view class="strateg-content-item-text">3.活动专区商品为临期或者微瑕疵商品不支持退换货，如有介意请勿参团；</view>
					<view class="strateg-content-item-text">4.每日领取的开团红包金额80%进入可用余额，20%进入购物金。</view>
				</view>
				<view class="confirm"  @click="closeStrategy()">我知道了</view>
			</view>
		</view>
		<view class="sharePopup">
			<uni-popup ref="sharepopup" type="bottom">
				<view class="popup">
					<view class="share">
						<view @click="copyLink()">
							<image src="/static/images/copylink.png" mode=""></image>
							<view>复制链接</view>
						</view>
						<view @click="downLoad()">
							<image src="/static/images/saveimg.png" mode=""></image>
							<view>下载有点东西APP</view>
						</view>
					</view>
					<view class="cancel" @click="cancelShare">取消</view>
				</view>
			</uni-popup>
		</view>
		<product-large-sku-cover-com></product-large-sku-cover-com>
		<uni-popup ref="buypopup" type="bottom">
			<view class="buy-content">
				<view class="content">
					<product-selected-sku-com :brokerageShow="brokerageShow"></product-selected-sku-com>
					<product-attribute-selector-com v-if="hasAttribute" class="selector-com"></product-attribute-selector-com>
					<product-sku-selector-com v-else class="selector-com"></product-sku-selector-com>
					<!-- <product-selected-sku-count-com></product-selected-sku-count-com> -->
					<view class="submit">
						<button class="button" plain="true" @click="submitOrder">确认提货</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="buypopupGroups" type="bottom">
			<view class="buy-content">
				<view class="content">
					<product-selected-sku-com :brokerageShow="brokerageShow"></product-selected-sku-com>
					<product-attribute-selector-com v-if="hasAttribute" class="selector-com"></product-attribute-selector-com>
					<product-sku-selector-com v-else class="selector-com"></product-sku-selector-com>
					<!-- <product-selected-sku-count-com></product-selected-sku-count-com> -->
					<view class="submit">
						<button class="button" plain="true" @click="submitOrderGroups">确认参团</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import store from "store"
	import { mapGetters,mapActions,mapMutations } from 'vuex'
	import CurrentUser from "mixins/CurrentUser"
	import { getInviteString } from "api/userApi"
	import { getProductInvitePoster } from "api/productApi"
	import { getGoodsGroupsList,startGroups,attendGroups } from 'api/collageApi'
	import ProductLargeSkuCoverCom from "components/product/purchase/ProductLargeSkuCoverCom"
	import ProductSelectedSkuCom from "components/product/purchase/ProductSelectedSkuCom"
	import ProductAttributeSelectorCom from "components/product/purchase/ProductAttributeSelectorCom"
	import ProductSelectedSkuCountCom from "components/product/purchase/ProductSelectedSkuCountCom"
	import ProductSkuSelectorCom from "components/product/purchase/ProductSkuSelectorCom"
	import ProductImagesCom from "components/product/detail/ProductImagesCom"
	
	export default {
		store,
		components: {
			ProductLargeSkuCoverCom,
			ProductSelectedSkuCom,
			ProductSkuSelectorCom,
			ProductAttributeSelectorCom,
			ProductSelectedSkuCountCom,
			ProductImagesCom
		},
		data(){
			return {
				strategyPopShow:false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				inviteString: null,
				invitePoster: null,
				invite_code: null,
				is_share:'false',
				pid:'',
				goodsGroupsList:[],
				groupsNum:0,
				brokerageShow:false,
				is_expire:false,
				from:'',
				needOpenGroups:false,
				bonus_record:null,
				needSlogan:false
			}
		},
		computed: {
			...mapGetters([
				'product',
				'user',
				'isLogin',
				'hasAttribute',
				'selectedSku',
				'displacesCardId'
				])
		},
		methods:{
			...mapActions(['getCurrentProduct']),
			...mapMutations(['setGroupId']),
			back(){
				uni.navigateBack({})
			},
			backHome(){
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			goMyPickUpGoodsList(){
				uni.navigateTo({url: '/packs/pages/myPickUpGoodsList/myPickUpGoodsList'})
			},
			downLoad(){
				uni.navigateTo({url: '/packs/pages/download/download'})
			},
			moveHandle(){},
			openStrategy(){
				this.strategyPopShow = true
			},
			closeStrategy(){
				this.strategyPopShow = false
			},
			shareProduct() {
				this.$refs.sharepopup.open('bottom')
			},
			cancelShare() {
				this.$refs.sharepopup.close()
			},
			goCollageList(){
				let id = this.pid;
				uni.navigateTo({url: '/packs/pages/collageList/collageList?id=' + id})
			},
			goCollageDetail(id){
				uni.navigateTo({url: '/packs/pages/collageDetail/collageDetail?id=' + id})
			},
			goMyPickUpGoodsList(){
				uni.navigateTo({url: '/packs/pages/myPickUpGoodsList/myPickUpGoodsList'})
			},
			copyLink(){
				let invite_code = null; 
				let _this = this;
				if(this.user){
					invite_code = this.user.invite_code
				}
				let copyUrl = window.location.href + '&is_share=true';
				if(invite_code){
					copyUrl = window.location.href + '&invite_code=' + invite_code + '&is_share=true';
				}
				uni.setClipboardData({
				    data: copyUrl,
				    success: function () {
							_this.cancelShare()
							uni.showModal({
								content:'已复制到剪切板!去分享给好友！',
								showCancel: false,
								confirmText:'去分享'
							})
				    }
				})
			},
			async openBuyPanel() {
				let _this = this;
				if (await this.isLogin) {
					if(await this.user.group_displace_card_count>0){
						if(this.displacesCardId){
							uni.showModal({
								title: '',
								content: '确认使用提货卡进行提货吗？',
								confirmColor:"#FF6011",
								success: function (res) {
									if (res.confirm) {
										// 创建订单底部弹框
										_this.$refs.buypopup.open('bottom')
									}
								}
							})
						}else{
							this.goMyPickUpGoodsList()
						}
					}else{
						uni.showModal({
							title: '提示',
							content: '您暂无提货卡，无法提货！',
							showCancel:false,
							confirmColor:"#FF6011",
							confirmText:"知道了"
						})
					}
				} else {
					uni.navigateTo({
						url: '/packs/pages/auth/auth?from=product'
					})
				}			
			},
			attendGroups(group_id){
				
				let parms = {
					product_id:this.product.product_id,
					group_id:group_id
				}
				attendGroups(parms).then(res=>{
					this.setGroupId(group_id)
					this.openBuyPanelGroups()
				})
			},
			async openBuyPanelGroups() {
				if (await this.isLogin) {
					// 创建订单底部弹框
					this.$refs.buypopupGroups.open('bottom')
				} else {
					uni.navigateTo({
						url: '/packs/pages/auth/auth?from=product'
					})
				}
			},
			async submitOrderGroups() {
				if (await this.isLogin) {
					if (this.selectedSku) {
						uni.navigateTo({
							url: `/packs/pages/order/confirm?needBrokerage=false`
						})
						this.$refs.buypopupGroups.close()
					} else {
						uni.showToast({
							title: '请选择规格',
							mask: true,
							icon: 'none',
							position: 'bottom',
							duration: 2000
						});
					}
				} else {
					uni.redirectTo({
						url: '/packs/one/pages/auth/auth'
					})
				}
			},
			async submitOrder() {
				if (await this.isLogin) {
					if (this.selectedSku) {
						uni.navigateTo({
							url: `/packs/pages/order/displacesConfirm`
						})
						this.$refs.buypopup.close()
					} else {
						uni.showToast({
							title: '请选择规格',
							mask: true,
							icon: 'none',
							position: 'bottom',
							duration: 2000
						});
					}					
				} else {
					uni.redirectTo({
						url: '/packs/one/pages/auth/auth'
					})
				}
			},
			async loadInvitePoster() {
				if (this.user) {
					const response = await getProductInvitePoster(this.product.id)
					this.invitePoster = response.mini_product_invite_poster
					this.$refs.shareposterpopup.open('center')
				} else {
					uni.navigateTo({
						url: `/packs/pages/auth/auth?from=product`
					})
					this.cancelShare()
				}
			},
			async loadProductInviteString(productId) {
				if (this.user) {
					const response = await getInviteString(productId)
					this.inviteString = response.invite_string
				}
			},
			async registerByInviterString(inviteCode = null) {
				if (this.user) {
					return
				}
				if (inviteCode) {
					let invite_code = this.invite_code
					uni.navigateTo({
						url: `/packs/pages/auth/auth?invite_code=${invite_code}&product_id=${this.pid}`
					})
				}
			},
			async startGroups(){
				let _this = this;
				if (await this.isLogin) {
					if(await this.user.group_card && !this.is_expire){
						uni.showModal({
							title: '提示',
							content: '发起开团24小时后若未成团，该团会自动取消。',
							confirmColor:"#FF6011",
							cancelColor:"#666666",
							success: function (res) {
								if (res.confirm) {
									let data = {
										product_id:_this.pid
									}
									startGroups(data).then(res=>{
										uni.showToast({
											icon:'none',
											title:'开团成功'
										})
										uni.navigateTo({
											url: '/packs/pages/collageDetail/collageDetail?id=' + res.id
										})
									})
								}
							}
						})
					}else{
						uni.showModal({
							title: '提示',
							content: '先去参团才能获取开团卡！',
							showCancel:false,
							confirmColor:"#FF6011"
						})
					}
				} else {
					uni.navigateTo({
						url: '/packs/pages/auth/auth?from=product'
					})
				}	
			},
			getGoodsGroupsList(id){
				getGoodsGroupsList(id).then(res=>{
					let list = res.data;
					this.groupsNum = res.meta.total;
					if(res.meta.total>1){
						this.goodsGroupsList = list.slice(0,3)
					}else{
						this.goodsGroupsList = list
					}
					this.init()
				})
			},
			init() {
				var date = new Date().getTime();
				let goodsGroupsList = this.goodsGroupsList;
				goodsGroupsList.forEach((item, index) => {
					let end_time = new Date(item.created_at.replace(/-/g, '/')).getTime() + 24*60*60*1000;
					var leftTime = end_time - date; //计算两日期之间相差的毫秒数
					if (leftTime >= 0) {
						let d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
						let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
						let m = Math.floor(leftTime / 1000 / 60 % 60);
						let s = Math.floor(leftTime / 1000 % 60);
						item.end_times = {
							d: d,
							h: h,
							m: m,
							s: s
						}
					}
				})
				this.goodsGroupsList = goodsGroupsList
			}   
		},
		async onLoad(options) {
			if(options.invite_code){
				this.invite_code = options.invite_code
				uni.setStorage({
					key: 'invite_code',
					data: options.invite_code
				})
			}
			if(options.id){
				this.pid = options.id
			}
			if(options.bonusrecord){
				this.bonus_record = JSON.parse(decodeURIComponent(options.bonusrecord))
			}
			if(options.is_share){
				this.is_share = options.is_share
			}
			await this.getCurrentProduct(options.id)
			await this.loadProductInviteString(options.id)
			if(options.invite_code){
				await this.registerByInviterString(options.invite_code)
			}
			if(options.from){
				this.from = options.from
			}
		},
		onShow() {
			this.getGoodsGroupsList(this.pid)
		},
		onReady() {
			let date = new Date().getTime();
			if(this.user.group_card){
				let end_time = new Date(this.user.group_card.disabled_at).getTime()
				var leftTime = end_time - date;
				if(leftTime<=0){
					this.is_expire = true
					this.needOpenGroups = true
				}else{
					this.needOpenGroups = false
					this.is_expire = false
				}
			}else{
				this.needOpenGroups = true
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background: #F6F6F6;
	}
	.collageGoodsDetail {
	  padding-bottom: 0;  
	  padding-bottom: constant(safe-area-inset-bottom);  
	  padding-bottom: env(safe-area-inset-bottom);  
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.back-box{
		width: 50rpx;
		height: 50rpx;
		background: rgba(0,0,0,0.2);
		border-radius: 50%;
		position: absolute;
		top:25rpx;
		left:32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}
	.back-box1{
		width: 50rpx;
		height: 50rpx;
		background: rgba(255,255,255,.5);
		border-radius: 50%;
		position: absolute;
		top:25rpx;
		left:32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}
	.collage-back{
		display: block;
		width: 40rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin-left: 202rpx;
	}
	.swiper {
	  width: 750rpx;
	  height: 750rpx;
	  .item {
			image{
				display: block;
				width: 750rpx;
				height: 750rpx;
			}
	  }
	}
	
	.goods-describe-box{
		width: 646rpx;
		padding: 32rpx 32rpx 20rpx 32rpx;
		margin:24rpx auto;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	
	.content {
		.head {
			display: flex;
			justify-content: space-between;
			.price {
				display: flex;
				justify-content: flex-start;
				align-items: center;		
			}
		}
	
		.title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			margin: 15rpx 0 18rpx 0;
			padding: 0 12rpx;
		}
	
		.tips {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #CCAD8C;
			padding:24rpx 12rpx 12rpx 12rpx;
			// border-top: 1rpx solid #E5E5E5;
			.arrow {
				width: 24rpx;
				height: 24rpx;
				margin-top: 5rpx;
				color: #999999;
			}
			.guarantee-pop {
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 9999999;
				.guarantee {
					border-top-left-radius: 16rpx;
					border-top-right-radius: 16rpx;
					background: white;
					padding-bottom: 50rpx;
					.head {
						display: flex;
						justify-content: center;
						padding-top: 24rpx;
						font-size: 36rpx;
						font-weight: 400;
						color: #333333;
					}
					.items {
						padding: 30rpx;
						.item {
							display: flex;
							align-items: center;
							margin-bottom: 30rpx;
							.icon {
								width: 44rpx;
								height: 44rpx;
								margin-right: 20rpx;
							}
							.desc {
								display: flex;
								flex-direction: column;
								justify-content: flex-start;
								.title {
									font-size: 32rpx;
									font-weight: 600;
									color: #333333;
									line-height: 0;
								}
								.subtitle {
									font-size: 24rpx;
									font-weight: 400;
									color: #999999;
								}
							}
						}
					}
					.know-button {
						width: 650rpx;
						height: 80rpx;
						background: linear-gradient(135deg, #FFDD62 0%, #FFBF0D 100%);
						border-radius: 40rpx;
						border: none;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
						line-height: 80rpx;
					}
				}
			}
		}
	}
	.isVipPrice{
		width:100%;
		height: 60rpx;
		border-radius: 12rpx 12rpx 0px 0px;
		position: relative;
		display: flex;
		align-items: center;
		.isVipPriceBg{
			width: 100%;
			height:100%;
			border-radius: 12rpx 12rpx 0px 0px;
			background: linear-gradient(270deg, rgba(255, 73, 36, 0.26) 0%, #FF4924 100%);
			opacity: 0.1;
			position: absolute;
			left:0;
			top:0;
		}
		>view:nth-child(2){
			font-size: 24rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FF4924;
			margin-left: 12rpx;
		}
	}
	.priceAndShare{
		display: flex;
		justify-content: space-between;
	}
	.priceAndShareLeft{
		display: flex;
	}
	.normal-price{
		margin: 0 16rpx 0 12rpx;
		>view:nth-child(1){
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF4924;
		}
		>view:nth-child(2){
			display: flex;
			align-items: baseline;
			>text:nth-child(1){
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF4924;
			}
			>text:nth-child(2){
				font-size: 48rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF4924;
			}
		}
	}
	.price-market-gray{
		display: flex;
		align-items: flex-end;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		text-decoration: line-through;
		margin-bottom: 10rpx;
	}
	.product_sold_count{
		display: flex;
		align-items: flex-end;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		margin-bottom: 10rpx;
		margin-left: 30rpx;
	}
	.share-btn{
		display: flex;
		align-items: flex-end;
		margin-right: 20rpx;
		>image{
			display: block;
			width:35rpx;
			height: 35rpx;
			margin:0 16rpx 12rpx 0;
		}
		>view{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF4924;
			margin-bottom: 10rpx;
		}
	}
	
	.goods-red-packet{
		display: flex;
		align-items: center;
		margin-top: 16rpx;
		image{
			display: block;
			width: 48rpx;
			height: 48rpx;
		}
		>view:nth-child(2){
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 228rpx;
			height: 48rpx;
			background: linear-gradient(90deg, #FDE1F3 0%, #FFF5ED 100%);
			border-radius: 8rpx;
			padding: 0 20rpx;
			>text:nth-child(1){
				font-size: 24rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FF4924;
				margin-right: 12rpx;
			}
			>text:nth-child(2){
				font-size: 24rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FF4924;
			}
		}
	}
	
	.buy_vip_tips{
		font-size: 24rpx;
		color:#FEBD01;
		margin-top: 10rpx;
		margin-left: 12rpx;
	}
	
	.sharePopup {
		position: absolute;
		z-index: 99999999;
		
		.popup {
			background: white;
			width:750rpx;
			height:460rpx;
			position: fixed;
			left:0;
			bottom: 0;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
		
			.share {
				display: flex;
				justify-content: space-around;
				padding:40rpx 40rpx 20rpx 40rpx;
				>view{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					>view{
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-top: 18rpx;
					}
					>image{
						display:block;
						width: 128rpx;
						height: 128rpx;
					}
				}
			}
		
			.cancel {
				padding:20rpx 0 60rpx 0rpx;
				text-align: center;
				font-size:28rpx;
				font-weight: 400;
				color: #333333;
			}
		}
		
		.share-poster {
			.image {
				width: 556rpx;
				height: 988rpx;
			}
		
			.save {
				width: 484rpx;
				height: 80rpx;
				margin: 0 auto;
				line-height: 80rpx;
				text-align: center;
				background: linear-gradient(135deg, #FFDD62 0%, #FFBF0D 100%);
				border-radius: 50rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
			}
		}
	}
	
	
	.product-poster-box{
		width:450rpx;
		height:800rpx;
		background: #FFFFFF;
		position: fixed;
		bottom:500rpx;
		left:150rpx;
		border-radius: 16rpx;
	}
	.collages-strategy{
		width: 710rpx;
		height: 330rpx;
		margin: 0 auto;
		>image{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.collages-ing-list{
		width: 710rpx;
		// height: 360rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin:16rpx auto;
		
	}
	.collages-ing-list-title{
		height: 90rpx;
		display:flex;
		align-items: center;
		border:1rpx solid #F0F0F0;
		justify-content: space-between;
		>view:nth-child(1){
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
			margin-left: 32rpx;
		}
		>view:nth-child(2){
			display: flex;
			align-items: center;
			margin-right: 32rpx;
			>view{
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
			}
			>image{
				display: block;
				width: 32rpx;
				height: 32rpx;
				margin-left: 8rpx;
			}
		}
	}
	.can-join-collage-list{
		margin-top: 30rpx;
		>view:nth-last-child(1){
			border: none;
		}
	}
	
	.can-join-collage-list-item{
		display: flex;
		justify-content: space-between;
		width: 622rpx;
		margin: 0 auto 30rpx;
		padding-bottom: 26rpx;
		border-bottom: 1rpx solid #F0F0F0;
		.left{
			display: flex;
			align-items: center;
			.userimg-box{
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				position: relative;
				.userimg{
					display: block;
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
				}
				.recommender{
					display: block;
					width: 48rpx;
					height: 26rpx;
					position: absolute;
					left:38rpx;
					top:-12rpx;
				}
			}
			.user-name{
				width:180rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
				margin-left: 14rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
			}
		}
		.right{
			display: flex;
			>view:nth-child(1){
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: center;
				>view:nth-child(1){
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
					>text{
						font-size: 28rpx;
						font-weight: 600;
						color: #F64646;
						line-height: 40rpx;
					}
				}
				>view:nth-child(2){
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
				}
			}
			>view:nth-child(2){
				width: 158rpx;
				height: 64rpx;
				background: linear-gradient(90deg, #F5724F 0%, #FE3B41 100%);
				border-radius: 16rpx;
				ont-size: 28rpx;
				font-weight: 600;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 24rpx;
				
			}
			.attended{
				background: #F0F0F0!important;
				color:#999999!important;
				font-weight: 400!important;
			}
		}
	}
	.footer{
		width: 100%;
		height: 108rpx;
		position: fixed;
		left:0;
		bottom: 0;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);
	}
	.customer-service-box{
		width:48rpx;
		display: flex;
		flex-direction:column;
		align-items: center;
		margin-left: 86rpx;
		>view{
			font-size: 24rpx;
			font-weight: 400;
			color: #555555;
			line-height: 24rpx;
			text-align: center;
		}
		>image{
			display: block;
			width: 40rpx;
			height: 42rpx;
			margin-bottom: 10rpx;
		}
	}
	
	.pick-up-goods{
		width: 216rpx;
		height: 88rpx;
		background: linear-gradient(138deg, #FEA153 0%, #FE8A3B 100%);
		border-radius: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 600;
		color: #FFFFFF;
		margin:0 24rpx 0 0rpx;
	}
	
	.want-open-group-box{
		width: 318rpx;
		height: 88rpx;
		position: relative;
		margin-right: 20rpx;
		
	}
	.want-open-group{
		width: 318rpx;
		height: 88rpx;
		background: linear-gradient(138deg, #FE7953 0%, #FE3B42 100%);
		border-radius: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 600;
		color: #FFFFFF;
	}
	.single-btn{
		width: 560rpx;
		.want-open-group{
			width: 560rpx;
		}
	}
	.want-open-group-tips{
		width: 302rpx;
		height: 48rpx;
		color: #FD232D;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right:6rpx;
		top:-22rpx;
		image{
			display: block;
			width: 100%;
			height:100%;
		}
	}
	.collage-strategy-pop{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: fixed;
		top:0;
		left:0;
		z-index: 999;
	}
	.collage-strategy-pop-content{
		width: 568rpx;
		height: 680rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		border: 2rpx solid #979797;
		position: absolute;
		left:0;
		top:0;
		bottom: 0;
		right: 0;
		margin: auto;
		padding: 0 0rpx 48rpx 0rpx;
	}
	.strateg-content-item-box{
		height: 500rpx;
		padding: 0 40rpx 0rpx 40rpx;
		overflow-y: auto;
	}
	.collages-strateg-pop-title{
		display: block;
		width: 236rpx;
		height: 64rpx;
		margin:56rpx auto 16rpx;
	}
	.close-pop{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top:32rpx;
		right:32rpx;
	}
	.strateg-content-item-title{
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
		line-height: 40rpx;
		margin:32rpx 0 16rpx 0;
	}
	.strateg-content-item-text{
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		margin: 20rpx 0 20rpx 0;
	}
	.confirm{
		width: 170rpx;
		height: 50rpx;
		border-radius: 30rpx;
		background: #FFF14D;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #333333;
		font-size: 26rpx;
		color:#333333;
		margin:0 auto;
	}
	
	/deep/.uni-countdown__splitor{
		margin:0!important;
	}
	/deep/.uni-countdown__number{
		width:30rpx!important;
		font-size:24rpx!important;
	}
	
	
	.buy-content {
		background: white;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
	
		.content {
			width: 710rpx;
			margin: 20rpx auto;
	
			.submit {
				.button {
					width: 560rpx;
					height: 70rpx;
					line-height: 70rpx;
					background: linear-gradient(138deg, #FFDF63 0%, #FEBF05 100%);
					border: none;
					border-radius: 52rpx;
					font-size: 30rpx;
					color: #333333;
				}
			}
		}
	}
	
	.selector-com{
		margin-bottom: 20rpx;
	}

</style>
